<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;  
        }
        #box {
            width: 1000px;
            margin: 100px auto;
            border:1px solid #ccc;
           
        }
        .box_top {
            padding: 20px;
            border: 1px solid #ccc;


        }
        #comment {
            width: 80%;
            padding: 10px 10px;
            font-size: 20px;
            outline: none;
        }
        #comment_content li {
            border-bottom: 1px;
            width: 800px;
            color: red;
            line-height: 45px;

        }
        #comment_content li a {
            float: right;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="box_top">
            <textarea name="" id="comment" cols="70" rows="10"placeholder="请输入内容"></textarea >
            <button id="btn">发表</button>
        </div>
        <ul id="comment_content">
            <!-- <li></li> -->
        </ul>
    </div>
    <script>
        window.onload=function(){
            //绑定单击事件
            $('btn').onclick=function(){
                //获取用户输入的内容
                var content=$('comment').value;
                //判断内容
                if(content.length===0){
                    alert('请输入内容');
                    return;
                }
                //创建li标签，插入到ul中
                var newLi=document.createElement('li');
                newLi.innerHTML='${content}<a href='javascript:void(0)'>删除</a>';
                $('comment_content').appendChild(newLi);
                //清空输入框的内容
                $('comment').value='';
                //删除评论
                var delBtns=document.getElementsByTagNameN('a');
                for(var i=0;i<delBtns.length;i++){
                    delBtns.onclick=function(){
                        this.parentNode.remove();
                    }
                }

            }
               //函数封装
            function$(id){
            return typeof id==='string'?document.getElementById(id):null;

           }
            }
        
     
    </script>
</body>
</html>